import type { FC } from 'react';
import IconPro from '../../IconPro';

import { ReactComponent as Select } from './images/select.svg';
import { ReactComponent as Pencli } from './images/pencli.svg';
import { ReactComponent as Line } from './images/line.svg';
import { ReactComponent as Rect } from './images/rect.svg';
import { ReactComponent as Circle } from './images/circle.svg';
import { ReactComponent as Shape } from './images/shape.svg';
import { ReactComponent as Text } from './images/text.svg';
import { ReactComponent as Path } from './images/path.svg';
import { ReactComponent as Handle } from './images/handle.svg';

const icons = {
  Select,
  Pencli,
  Line,
  Rect,
  Circle,
  Shape,
  Text,
  Path,
  Handle
}

type Icon1Props = {
  icon: IconType;
  svgComponent?: SvgComponent;
}

type Icon2Props = {
  icon?: IconType;
  svgComponent: SvgComponent;
}

export type IconType = keyof typeof icons;
export type IconProps = Icon1Props | Icon2Props;

export const getSvgComponent = (
  icon: IconType
) => icons[icon];

const Icon: FC<IconProps> = (props) => {
  const { icon, svgComponent } = props;

  let svg = svgComponent;
  if (icon) svg = getSvgComponent(icon);
  return svg ? <IconPro svg={svg} /> : null;
}

export default Icon;
